<!-- 1：组件的结构，template不参与结构样式-->
 <template>
  <div class="demo">
    <h2>学校名称: {{ schoolName }}</h2>
    <h2>学校地址: {{ address }}</h2>
    <button @click="showName">点我提示学校名</button>
  </div>
</template>

<!-- 2：组件交互相关代码，数据、方法等 -->
<script>
//注意也要创建组件及名字，最重要的是将组件暴露出去，有三种方式

//一：分别暴露。  在创建组件语句前，添加export，每个组件单独控制
/* export const school = Vue.extend({
  data() {
    return {
      schoolName: "尚硅谷",
      address: "北京昌平",
    };
  },
  methods: {
    showName() {
      alert(this.schoolName);
    },
  },
}); */

//二：统一暴露，收集组件并一起处理
//export { school };

//三，默认暴露，设置单个的默认暴露节点     单个的话一般用默认暴露，引入简单
//export default school;

//所以最后代码可以精简，直接暴露配置项
export default {
  name: "School", //最好跟外面文件保持一致，便于查找和维护
  data() {
    return {
      schoolName: "尚硅谷",
      address: "北京昌平",
    };
  },
  methods: {
    showName() {
      alert(this.schoolName);
    },
  },
};
</script>

<!-- 3：组件的样式 -->
<style>
/* 样式的注释要这样写 */
.demo {
  background-color: aqua;
}
</style>


<!-- 只支持上述标签，其他的不支持 -->